<template>
	<view class="commentPage">
		<view class="detail-list">
			<view class="commentContent" v-for="(item,index) in detailList" :key="index">
				<view class="avatar">
					<u--image :src="item.avatarUrl" shape="circle" mode="aspectFill" width="68rpx" height="68rpx">
					</u--image>
				</view>
				<view class="baseInfo">
					<view class="nickName">{{item.nickName}}</view>
					<view class="interactContent">
						<view v-if="item.lastId">
							<text>回复</text>了你的<text>评论</text>
						</view>
						<view v-else>
							<text>评论</text>了你的<text>帖子</text>
						</view>
						<text class="commentDate">{{item.date}}</text>
					</view>
					<view class="commentText">{{item.commentText}}</view>
					<view class="commentReply">
						<view style="width:10rpx;height:37rpx;border-radius:5rpx;background-color: #eee;margin-right:8rpx;"></view>
						<view class="replyText">
							{{item.commentReply}}
						</view>
					</view>
					<view class="commentBtnBox">
						<view class="commentBtn" @click="showReplyInput(item)">
							<u--image src="/static/commentDetail/icon1.png" mode="aspectFill" width="24rpx" height="24rpx"></u--image>
							<text style="margin-left:7rpx;">回复评论</text>
						</view>
						<view class="commentBtn likes" @click="doThumbReply(item, index)">
							<u--image src="/static/commentDetail/icon-on.png" mode="aspectFill" width="26rpx" height="23rpx" v-if="item.isThumbsUp"></u--image>
							<u--image src="/static/commentDetail/icon.png" mode="aspectFill" width="26rpx" height="23rpx" v-else></u--image>
						</view>
					</view>
				</view>
				<view class="postsCover" @click="goDetail(item)">
					<u--image :src="item.coverUrl" shape="square" mode="aspectFill" width="101rpx" height="101rpx">
					</u--image>
				</view>
			</view>
			<view class="loadbox">
				<u-loadmore :status="isLoading?'loading': (pageParams.pageNumber >= pageParams.totalPages ? 'nomore' : 'loadmore')" loading-text="正在加载" loadmore-text="加载更多"
					nomore-text="没有更多了" color="#d0d0d0" />
			</view>
			
		</view>
		<!-- 回复帖子的弹窗 -->
		<view class="replyInput" v-if="showReply" :style="[{ 'bottom':btnContentHeight - 3 + 'px'}]">
			<textarea placeholder-class="placeClass" v-model="replyValue" :placeholder="someonePlaceholder" maxlength="1000"
				:adjustPosition="false" :show-confirm-bar="false" @blur="leaveInput" @focus="getHeight"
				:auto-height="true" :focus="true" :maxlength="800" @keyboardheightchange="keyboardheightchange">
			</textarea>
			<view class="replyRepublish" @click="doPublishComment()">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	import { getUser } from '@/utils/vmall.js';
	export default {
		data() {
			return {
				// {
				// 	avatarUrl:'/static/auth/4.png',
				// 	nickName:'大山',
				// 	userName:'一枝花',
				// 	date:'01-10',
				// 	commentText:'哪个免税店哪个免税店哪个免税店',
				// 	commentReply:'圆儿：海口刚买的520圆儿：海口刚买的520圆儿：海口刚买的520',
				// 	coverUrl:'/static/community/6.png'
				// }
				userInfo: {},
				detailList:[],
				pageParams:{
					pageSize: 20,
					pageNumber: 1,
					total:1,
					totalPages:1,
				},
				isLoading: false,
				isRefresh: false,
				btnContentHeight: 0,
				replyValue: '',
				showReply: false,
				someonePlaceholder: '',
				activeComment: null
			}
		},
		onLoad() {
			getUser().then(info => {
				this.userInfo = info
				this.goDetailPage()
			})
		},
		onReachBottom() {
			if (!this.isLoading) {
				if (this.pageParams.pageNumber < this.pageParams.totalPages) {
					this.pageParams.pageNumber++
					this.pageQuery()
				}
			}
		},
		onPullDownRefresh() {
			this.isRefresh = true
			this.clearPage()
			this.pageQuery()
		},
		methods: {
			goDetail(item) {
				console.log('detail', item)
				uni.navigateTo({
					url: "/pages/postDetail/postDetail?id=" + item.id,
					success: () => {
						// this.readId = id
					}
				})
			},
			showReplyInput(comment) {
				this.showReply = true
				this.activeComment = comment
				this.someonePlaceholder = "回复" + comment.nickName + "："
			},
			doPublishComment() {
				if (!this.replyValue) {
					uni.showToast({
						icon: "none",
						title: "请输入内容"
					})
					return;
				}
				this.$request.post(this.$api.doReply, {
					parentUserId: this.activeComment.userIds || this.activeComment.parentUserId,
					postsId: this.activeComment.id,
					userId: this.userInfo.id,
					text: this.replyValue,
					lastId: this.activeComment.replyId,
					parentId: this.activeComment.parentId || this.activeComment.replyId
				}).then(res => {
					this.replyValue = "";
					this.showReply = false
					uni.hideLoading()
					uni.showToast({
						icon: "success",
						title: "发布成功"
					})
					console.log('this.showReply',this.showReply)
				})
			},
			// 选择某条评论进行回复点赞
			doThumbReply(item, index) {
				let url = this.$api.thumbsReply
				if (item.isThumbsUp) {
					url = this.$api.thumbsReplyNo
				}
				this.$request.get(url, {
					id: item.replyId,
					userId: this.userInfo.id
				}).then(res => {
					if (item.isThumbsUp) {
						item.isThumbsUp = false
						this.$set(this.detailList, index, item)
						uni.showToast({
							icon: "success",
							title: "取消点赞成功"
						})
					} else {
						item.isThumbsUp = true
						this.$set(this.detailList, index, item)
						uni.showToast({
							icon: "success",
							title: "点赞成功"
						})
					}
					uni.hideLoading()
				})
			},
			leaveInput(e) {
				this.btnContentHeight = 0
				setTimeout(() => {
					this.showReply = false
				}, 100)
			},
			getHeight(e, a, b) {
				if (e) {
					this.btnContentHeight = e.target.height;
				}
				this.showOperate = false;
			},
			keyboardheightchange(e) {
				if (e && this.btnContentHeight != e.target.height) {
					this.btnContentHeight = e.target.height
				}
			},
			pageQuery() {
				this.isLoading = true
				this.goDetailPage()
			},
			clearPage() {
				this.isLoading = false
				this.pageParams = {
					pageSize: 20,
					pageNumber: 1,
					total:1,
					totalPages:1,
				}
				this.detailList = []
			},
			goDetailPage(){
				this.$request.get(this.$api.replyDetail, {
					pageNo: this.pageParams.pageNumber,
					pageSize: this.pageParams.pageSize,
					userId: this.userInfo.id
				}).then(res => {
					// 加载状态重置
					uni.hideLoading()
					this.isLoading = false
					if (this.isRefresh) uni.stopPullDownRefresh()
					this.isRefresh = false
					const { success, result } = res
					if (success) {
						const { records, total, pages } = result
						const fullyear = new Date().getFullYear()
						const detailList = records.map((item, index) => {
							let time = item.updateTime
							let images = item.images
							let headPic = item.headPic
							let coverUrl = '/static/community/6.png'
							let userHeadpic = '/static/auth/4.png'
							if (time) {
								if (Number(time.substr(0, 4)) == fullyear) {
									time = time.substr(5)
								}
							}
							if (images) {
								coverUrl = images.indexOf(',') != -1 ? this.$appFunc.getFileUrl(images.split(',')[0]) : this.$appFunc.getFileUrl(images)
							}
							if (headPic) {
								userHeadpic = this.$appFunc.getFileUrl(headPic)
							}
							return Object.assign({}, item, {
								avatarUrl:  userHeadpic,
								nickName: item.nickName || '未知',
								date: time,
								commentText: item.text,
								commentReply: item.lastId ? item.lastText : item.name,
								coverUrl:  coverUrl,
							})
						})
						this.detailList = this.detailList.concat(detailList)
						this.pageParams.total = total
						this.pageParams.totalPages = pages
					}  else {
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
@import '@/style/variable.scss';
.commentPage {
	background:$font-color-white;
	.detail-list {
		width: 100%;
		padding:0 30rpx 30rpx;
		box-sizing: border-box;
	}
	.loadbox {
		padding: 20rpx 0rpx;
	}
	.replyInput {
		padding: 20rpx 40rpx 20rpx 40rpx;
		position: fixed;
		width: calc(100% - 80rpx);
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 9;
		padding-bottom: 20rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	
		.u-input {
			height: 40rpx;
			line-height: 40rpx;
			font-size: 24rpx;
		}
	
		.placeClass {
			color: #D0D0D0;
		}
	
		textarea {
			border: 1rpx solid #D0D0D0;
			width: calc(100% - 40rpx);
			padding: 20rpx 20rpx;
			border-radius: 40rpx;
		}
	
		.replyOperate {
			display: flex;
			flex-wrap: nowrap;
			width: 300rpx;
			padding-left: 20rpx;
			z-index: 9;
	
			.operateItem {
				display: flex;
				justify-content: center;
				flex-wrap: nowrap;
				align-items: center;
				font-size: 26rpx;
				width: calc(100% / 3);
				position: relative;
				flex-direction: column;
				line-height: 1;
	
				.text {
					padding-top: 8rpx;
					display: inline-block;
					width: 100%;
					text-align: center;
				}
			}
		}
	
		.shareContent {
			height: 400rpx;
	
			.title {
				height: 100rpx;
				border-bottom: 1rpx solid #eeeeee;
				text-align: center;
				line-height: 100rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
	
			.shareInfo {
				display: flex;
				justify-content: space-around;
				flex-wrap: nowrap;
				padding-top: 40rpx;
	
				.shareItem {
					display: flex;
					flex-direction: column;
					align-items: center;
	
					.itemTitle {
						padding-top: 30rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
					}
				}
			}
		}
		.replyRepublish {
			display: flex;
			flex-wrap: nowrap;
			width: 80rpx;
			padding-left: 20rpx;
			z-index: 9;
			text-align: center;
			justify-content: center;
			color: #004DA1FF;
		}
	}
}
.commentContent{
	padding:37rpx 0;
	margin:0 auto;
	overflow: hidden;
	border-bottom: 1px solid $border-color-grey;
	display:flex;
	justify-content: space-between;
	.avatar{
		background-color: $border-color-grey;
		width:68rpx;
		height: 68rpx;
		overflow: hidden;
		border-radius: 50%;
		flex-shrink: 0;
		margin-top:17rpx;
	}
	.baseInfo{
		flex:1;
		margin:0 17rpx;
		width:calc(100vw - 185rpx);
		overflow:hidden;
		.nickName{
			font-size:26rpx;
			color:$font-color-black;
			font-weight:600;
		}
		.interactContent{
			display: flex;
			justify-content:flex-start;
			font-size:$font-sm;
			color:#777;
			margin:13rpx 0;
			.commentDate{
				margin-left:18rpx;
			}
		}
		.commentText{
			font-size:$font-sm;
			color:$font-color-black;
		}
		.commentReply{
			display:flex;
			flex-direction: row;
			align-items: center;
			height:37rpx;
			overflow:hidden;
			color:#777;
			font-size: $font-sm;
			margin:13rpx 0 25rpx;
			.replyText{
				width:calc(100% - 18rpx);
				overflow:hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.commentBtnBox{
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items:center;
			.commentBtn{
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				height:50rpx;
				color:$font-color-black;
				font-size:22rpx;
				padding:0 16rpx;
				background-color: $border-color-grey;
				border-radius:20rpx;
			}
			.likes{
				width:50rpx;
				height:50rpx;
				justify-content: center;
				padding:0;
				border-radius: 50%;
				margin-left:16rpx;
			}
		}
	}
	.postsCover{
		width:101rpx;
		height:101rpx;
		overflow:hidden;
		border-radius: 20rpx;
		flex-shrink: 0;
	}
}
</style>
